<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡与捕获</title>
    <style>
        p{ padding: 20px; border:5px solid green}
        div{
            padding: 20px; border: 5px solid orange;
        }
        body{ padding: 20px; border:5px solid blue;}
    </style>
<body>
    <div>
        <p>我是行p标签 </p>
        <a href="javascript:void(0)">百度</a>
    </div>
    
    <script>
    
//  当我们单击p标签  div标签也被单击  body也被单击了,谁先被触发呢？
var p = document.querySelector("p");
var div = document.querySelector("div");
var body = document.body;
var a = document.querySelector("a");
body.addEventListener("click",()=>{console.log("body被单击了")})
div.addEventListener("click",()=>{console.log("div被单击了")})
p.addEventListener("click",e=>{console.log("p被单击了");e.stopPropagation();}) 
a.addEventListener("click",e=>{console.log("a被单击了");e.preventDefault()}) 

/* body.addEventListener("click",()=>{console.log("body被单击了")},true)
div.addEventListener("click",()=>{console.log("div被单击了")},true)
p.addEventListener("click",()=>{console.log("p被单击了")},true) */

// 最后一个参数？是否为捕获流

    </script>

</body>
</html>